<template>
	<view class="container uni-pb-16">
		<uwo-nav-bar bgColor="#2979ff">
			<template #content>任务检查,动态表单校验</template>
			<template #right>
				<view class="">
					<uni-icons custom-prefix="uwofont" type="uwo-zancun" color="#FFFFFF" style="vertical-align: -1px"></uni-icons>
					<text>暂存</text>
				</view>
			</template>
		</uwo-nav-bar>
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">总检查数{{ totalItem }}项，已检查{{ checkedItem }}项，还剩{{ uncheckItem }}项未检查。</text>
		</uni-card>
		<uni-forms ref="myForm" :modelValue="formData" :label-width="75">
			<uni-group v-for="(group, index) in dataSource" :key="index" :title="group.groupName">
				<view class="" :class="{ 'uni-mt-10': idx !== 0 }" v-for="(child, idx) in group.child" :key="idx">
					<view class="">{{ idx + 1 }}、{{ child.title }}</view>
					<!-- <view class="text-info uni-mt-4">说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</view> -->
					<uni-row :gutter="10" class="uni-mt-10">
						<uni-col :span="8">
							<button class="cu-btn block" @click="handleCheck(child, '1')" :class="[child.state === '1' ? 'bg-primary' : 'line-primary']">符合</button>
						</uni-col>
						<uni-col :span="8">
							<button class="cu-btn block" @click="handleCheck(child, '2')" :class="[child.state === '2' ? 'bg-error' : 'line-error']">不符合</button>
						</uni-col>
						<uni-col :span="8">
							<button class="cu-btn block" @click="handleCheck(child, '3')" :class="[child.state === '3' ? 'bg-warning' : 'line-warning']">不适用</button>
						</uni-col>
					</uni-row>
					<!-- 不符合，提交隐患 -->
					<view class="content uni-mt-8 uni-pa-8" v-if="child.state === '2'">
						<uni-forms-item
							label="姓名"
							required
							:name="'child[' + child.id + '@name]'"
							:rules="[
								{
									required: true,
									errorMessage: '姓名不能为空'
								}
							]"
						>
							<uni-easyinput trim="all" v-model="formData.child[child.id + '@name']" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item
							label="文件上传"
							required
							:name="'child[' + child.id + '@appendix]'"
							:rules="[
								{
									required: true,
									errorMessage: '文件不能为空'
								}
							]"
						>
							<uwo-upload
								v-model="formData.child[child.id + '@appendix']"
								:maxCount="10"
								:disabled="false"
								:static-url="getEnv().API_URL_STATIC"
								:uploadUrl="getEnv().API_URL_UPLOAD"
								:headers="getEnv().header"
							></uwo-upload>
							<!-- <view class="text-info">建议宽高比例750*450</view> -->
						</uni-forms-item>
						<uni-forms-item
							label="性别"
							required
							:name="'child[' + child.id + '@sex]'"
							:rules="[
								{
									required: true,
									errorMessage: '性别不能为空'
								}
							]"
						>
							<uni-data-checkbox v-model="formData.child[child.id + '@sex']" :localdata="sexs" />
						</uni-forms-item>
						<uni-forms-item
							label="兴趣爱好"
							required
							:name="'child[' + child.id + '@hobby]'"
							:rules="[
								{
									required: true,
									errorMessage: '兴趣爱好不能为空'
								}
							]"
						>
							<uni-data-checkbox v-model="formData.child[child.id + '@hobby']" multiple :localdata="hobbys" />
						</uni-forms-item>
					</view>
					<!-- 不适用，添加说明 -->
					<view class="content uni-mt-8 uni-pa-8" v-if="child.state === '3'">
						<uni-forms-item
							label="自我介绍"
							required
							:name="'child[' + child.id + '@introduction]'"
							:rules="[
								{
									required: true,
									errorMessage: '自我介绍不能为空'
								}
							]"
						>
							<uni-easyinput trim="both" type="textarea" v-model="formData.child[child.id + '@introduction']" placeholder="请输入自我介绍" />
						</uni-forms-item>
					</view>
				</view>
			</uni-group>
		</uni-forms>
		<uni-row :gutter="10" class="uni-mt-10 uni-px-8">
			<uni-col :span="24">
				<button class="cu-btn lg block bg-success">再来一条</button>
				<button class="cu-btn lg block bg-primary" @click="submit('valiForm')">提交</button>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { onReady } from '@dcloudio/uni-app';
import { getEnv } from '@/common/config.js';
const rows = [];
for (var i = 0; i < 5; i++) {
	const child = [];
	for (var x = 0; x < 5; x++) {
		child.push({
			id: i + '' + x + 'n',
			title: '我是检查项我是检查项我是检查项我是检查项我是检查项我是检查项我是检查项' + x,
			state: '0'
		});
	}
	rows.push({
		groupName: '我是分组名称' + i,
		child: child
	});
}
const dataSource = ref(rows);

// 总检查项
const totalItem = computed(() => {
	let total = 0;
	dataSource.value.forEach((d) => {
		total += d.child.length;
	});
	return total;
});
// 已检查项
const checkedItem = computed(() => {
	let total = 0;
	dataSource.value.forEach((d) => {
		total += d.child.filter((c) => c.state !== '0').length;
	});
	return total;
});
// 未检查项
const uncheckItem = computed(() => {
	return totalItem.value - checkedItem.value;
});

const myForm = ref();
// 基础表单数据
const formData = ref({
	child: {
		// xxx@name: '',
		// xxx@appendix: [],
		// xxx@sex: 2,
		// xxx@hobby: [],
		// xxy@introduction: ''
	}
});

// 单选数据源
const sexs = ref([
	{
		text: '男',
		value: 0
	},
	{
		text: '女',
		value: 1
	},
	{
		text: '保密',
		value: 2
	}
]);

// 多选数据源
const hobbys = ref([
	{
		text: '跑步',
		value: 0
	},
	{
		text: '游泳',
		value: 1
	},
	{
		text: '绘画',
		value: 2
	},
	{
		text: '足球',
		value: 3
	},
	{
		text: '篮球',
		value: 4
	},
	{
		text: '其他',
		value: 5
	}
]);
onReady(() => {});

/**
 * 检查
 */
const handleCheck = (child, state) => {
	child.state = state;
};
const submit = () => {
	if (uncheckItem.value > 0) {
		uni.showModal({
			title: '警告',
			content: `还有${uncheckItem.value}项未检查哦，请检查后再进行提交。`,
			showCancel: false
		});
		return;
	}
	myForm.value
		.validate()
		.then((res) => {
			console.log('success', res);
			/**
			 * 根据@分割符号，解析数据。。。
			 * 检查信息｛id:xx,state:'',remark:''｝
			 * 隐患信息｛xxxxx｝
			 *
			 * 提交记录不合格，不适用的
			 * 服务端先根据任务id把所有更新为合格，再更新其他
			 */
			uni.showToast({
				title: `校验通过`
			});
		})
		.catch((err) => {
			uni.showToast({
				title: '数据校验不通过，请检查。'
			});
			console.log('err', err);
		});
};
</script>

<style lang="scss" scoped>
.container {
}
.content {
	background-color: $uni-bg-color;
	border-radius: 8px;
}
</style>
